<template>
  <div>
    <div class="markerBox">
      <div class="actions">
        <el-button type="primary" size="small" @click="handleMarker">气泡图</el-button>
        <el-button type="primary" size="small" @click="handleCake">饼状图</el-button>
        <el-button type="primary" size="small" @click="handleScatter">散点图</el-button>
        <el-button type="primary" size="small" @click="handle3D">3D 柱状地图</el-button>
        <el-button type="primary" size="small" @click="handleHot">热力图</el-button>
        <el-button type="primary" size="small" @click="handleMapbox">操作mapbox</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { PointLayer, Marker, HeatmapLayer } from "@antv/l7";
import * as G2 from "@antv/g2";
import * as mapboxgl from "../assets/lib/mapbox_gl_4490.js";

export default {
  name: "markerBox",

  props: {
    scene: {
      type: Object,
      default: function () {
        return {};
      },
    },

    map: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },

  data() {
    return {
      marker: null,
    };
  },

  methods: {
    handleMapbox() {
      let scene = this.scene;
      scene.removeAllLayer();
      scene.panTo([116.41036, 39.912807]);
      let marker = this.markerl;
      if (marker) {
        return false;
      }
      let map = this.map;
      var monument = [116.41036, 39.912807];

      // create the popup
      var popup = new mapboxgl.Popup({ offset: 25 }).setText("Construction on the Washington Monument began in 1848.");

      // create DOM element for the marker
      var el = document.createElement("div");
      el.id = "marker";
      el.style.zIndex = "99999";

      // create the marker
      this.marker = new mapboxgl.Marker(el)
        .setLngLat(monument)
        .setPopup(popup) // sets a popup on this marker
        .addTo(map);
    },

    handleMarker() {
      let scene = this.scene;
      scene.removeAllLayer();
      scene.panTo([116.41036, 39.912807]);
      fetch("https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json")
        .then((res) => res.json())
        .then((data) => {
          const pointLayer = new PointLayer({})
            .source(data)
            .shape("circle")
            .size("mag", [1, 25])
            .color("mag", (mag) => {
              return mag > 4.5 ? "#5B8FF9" : "#5CCEA1";
            })
            .active(true)
            .style({
              opacity: 0.3,
              strokeWidth: 1,
            });
          scene.addLayer(pointLayer);
        });
    },

    handleCake() {
      let scene = this.scene;
      scene.removeAllLayer();
      const CSS = `.l7-marker .g2-guide-html {
                      width: 50px;
                      height: 50px;
                      vertical-align: middle;
                      text-align: center;
                      line-height: 0.1
                    }

                    l7-marker .g2-guide-html .title {
                      font-size: 12px;
                      color: #8c8c8c;
                      font-weight: 300;
                    }

                    l7-marker .g2-guide-html .value {
                      font-size: 18px;
                      color: #000;
                      font-weight: bold;
                    }`;
      this.loadCssCode(CSS);
      this.addChart();
    },

    addChart() {
      let scene = this.scene;
      Promise.all([
        fetch("https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json").then((d) =>
          d.json()
        ),
        fetch("https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json").then((d) =>
          d.json()
        ),
      ]).then(function onLoad([center, population]) {
        const popobj = {};
        population.forEach((element) => {
          popobj[element.Code] = element["Population, female (% of total) (% of total)"];
        });
        // 数据绑定

        center.features = center.features.map((fe) => {
          fe.properties.female = popobj[fe.properties.id] * 1 || 0;
          return fe;
        });
        center.features.forEach((point) => {
          const el = document.createElement("div");
          const coord = point.geometry.coordinates;
          const v = point.properties.female * 1;
          if (v < 1 || (v > 46 && v < 54)) {
            return;
          }
          const size = 60;
          const data = [
            {
              type: "男性",
              value: 100.0 - v.toFixed(2),
            },
            {
              type: "女性",
              value: v.toFixed(2) * 1,
            },
          ];
          const chart = new G2.Chart({
            container: el,
            width: size,
            height: size,
            render: "svg",
            padding: 0,
          });
          chart.source(data);
          chart.legend(false);
          chart.tooltip(false);
          chart.coord("theta", {
            radius: 0.9,
            innerRadius: 0.6,
          });
          chart.intervalStack().position("value").color("type", ["#5CCEA1", "#5B8FF9"]).opacity(1);
          chart.render();
          const marker = new Marker({ element: el }).setLnglat({
            lng: coord[0],
            lat: coord[1],
          });
          scene.addMarker(marker);
          scene.panTo([66.08669017344639, 33.85639924331851]);
        });
      });
    },

    loadCssCode(code) {
      const style = document.createElement("style");
      style.type = "text/css";
      style.rel = "stylesheet";
      // for Chrome Firefox Opera Safari
      style.appendChild(document.createTextNode(code));
      // for IE
      // style.styleSheet.cssText = code;
      const head = document.getElementsByTagName("head")[0];
      head.appendChild(style);
    },

    handleScatter() {
      let scene = this.scene;
      scene.removeAllLayer();
      scene.panTo([116.41036, 39.912807]);
      fetch("https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv")
        .then((res) => res.text())
        .then((data) => {
          const pointLayer = new PointLayer({})
            .source(data, {
              parser: {
                type: "csv",
                x: "Longitude",
                y: "Latitude",
              },
            })
            .shape("circle")
            .active(true)
            .animate(true)
            .size(40)
            .color("#ffa842")
            .style({
              opacity: 1,
              offsets: [40, 40],
            });
          const pointLayer2 = new PointLayer({})
            .source(data, {
              parser: {
                type: "csv",
                x: "Longitude",
                y: "Latitude",
              },
            })
            .shape("circle")
            .active(true)
            .animate(true)
            .size(50)
            .color("#f00")
            .style({
              opacity: 1,
            });

          scene.addLayer(pointLayer);
          scene.addLayer(pointLayer2);
        });
    },

    handle3D() {
      let scene = this.scene;
      scene.removeAllLayer();
      scene.panTo([116.41036, 39.912807]);
      fetch("https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json")
        .then((res) => res.json())
        .then((data) => {
          const pointLayer = new PointLayer({})
            .source(data.list, {
              parser: {
                type: "json",
                x: "j",
                y: "w",
              },
            })
            .shape("cylinder")
            .size("t", function (level) {
              return [1, 2, level * 2 + 20];
            })
            .active(true)
            .color("t", [
              "#094D4A",
              "#146968",
              "#1D7F7E",
              "#289899",
              "#34B6B7",
              "#4AC5AF",
              "#5FD3A6",
              "#7BE39E",
              "#A1EDB8",
              "#CEF8D6",
            ])
            .style({
              opacity: 1.0,
            });
          scene.addLayer(pointLayer);
        });
    },

    handleHot() {
      let scene = this.scene;
      scene.removeAllLayer();
      scene.panTo([116.41036, 19.912807]);
      fetch("https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json")
        .then((res) => res.json())
        .then((data) => {
          const layer = new HeatmapLayer({})
            .source(data)
            .shape("heatmap")
            .size("mag", [0, 1.0]) // weight映射通道
            .style({
              intensity: 2,
              radius: 20,
              opacity: 1.0,
              rampColors: {
                colors: ["#FF4818", "#F7B74A", "#FFF598", "#91EABC", "#2EA9A1", "#206C7C"].reverse(),
                positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
              },
            });
          scene.addLayer(layer);
        });
    },
  },
};
</script>

<style scoped>
.markerBox {
  position: relative;
  width: 100%;
}

.actions {
  position: absolute;
  top: 10px;
  right: 0;
  z-index: 999;
}
</style> 